<template>
	<view>
		<VideoBox>
			<template #content>
				<view class="outBox">
					<u-navbar leftText="我的拼卡" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
						<view class="left-slot" slot="left">
							<u-icon name="arrow-left" color="#fff"></u-icon>
							<text>{{ '我的拼卡' }}</text>
						</view>
					</u-navbar>
					<view class="content">
						<div class="btns">
							<view :class="['btnOut',btnType == 1 ? 'btnOut2' : '']">
								<view class="btn" @click="getDataList(1)">
									<text>申请拼卡</text>
								</view>
							</view>
							<view :class="['btnOut',btnType == 2 ? 'btnOut2' : '']">
								<view class="btn" @click="getDataList(2	)">
									<text>我申请的拼卡</text>
								</view>
							</view>
						</div>
						<div class="itemsBox">
							<view class="items" v-if="btnType == 1">
								<view class="item" v-for="item in dataList" :style="{
																background:`url(${getImgUrl('/mine/cardCombination/img1.png')})`,
																backgroundSize:'100% 100%'
															  }" @click="getnav('/pages/mine/cardCombination/details?id=' + item.id)">
									<view class="top">
										<view class="left">
											<view class="title">{{item.counterNo}}：{{item.shareName}}</view>
											<view class="time">{{item.createTime}}</view>
											<view class="time">男生：{{item.boyPrice}}元 女生：{{item.girlPrice}}元</view>
										</view>
										<view class="right">
											<view class="state">
												<text>{{getShareParticipateStatus(item)}}</text>
											</view>
										</view>
									</view>
									<scroll-view scroll-x class="scrollView">
										<view class="users">
											<view class="img" v-for="user in item.participants">
												<image :src="user.avatar" mode="scaleToFill"></image>
											</view>
										</view>
									</scroll-view>
								</view>

							</view>
							<div class="mine" v-else>
								<div class="topBox">
									<div class="lines">
										<div @click="getDataList(2,1)" :class="['line',btnType2 == 1 ? 'active' : '']">
											我今日申请的拼卡
										</div>
										<div @click="getDataList(2,2)" :class="['line',btnType2 == 2 ? 'active' : '']">
											历史申请的拼卡
										</div>
									</div>
									<view class="selectTime" v-if="btnType2 == 2">
										<ep-select v-model="selectTime" :options="options"
											@change="changeTime"></ep-select>
									</view>
								</div>
								<view class="items">
									<view class="item" v-for="item in dataList" :style="{
											backgroundImage:`url(${getImgUrl('/mine/cardCombination/img5.png')})`
											,
										  }" @click="handleDetails(item)">
										<view class="left">
											<view class="top">
												<view class="num">
													<text>卡台号</text>
												</view>
												<view class="name">
													<text>{{item.counterNo}}</text>
												</view>
											</view>
											<view class="bottom">
												<div class="tip">
													<text>{{formatDateTime(item.createTime)}}</text>
												</div>
												<view class="tip">
													<text>已参与</text>
													<text>{{item.num || 0}}人</text>
												</view>
											</view>
										</view>
										<view class="right">
											<view class="state"
												:class="[item.auditStatus == 2 ? 'state2' : '',item.isDone == 1 ? 'state2' : '']">
												<text>{{getShareParticipateStatus(item) }}</text>
											</view>
										</view>
									</view>
								</view>
							</div>

						</div>
					</view>
				</view>
			</template>
		</VideoBox>
	</view>
</template>

<script>
	import VideoBox from "@/components/VideoBox/index.vue";
	import {
		getImgUrl,
		getImgUrlLocal,
		getWXStatusHeight
	} from "@/utils";
	import {
		getMyJoinedOrderShareApi,
		getOrderParticipateShareCounterApi,
	} from "@/api/api";

	export default {
		components: {
			VideoBox
		},
		onLoad(e) {
			let obj = getWXStatusHeight()
			this.menuHeight = obj.menuHeight
			this.generatePastMonths()
			this.getDataList()
			if(e.btnType){
				this.btnType = 2
			}
		},
		data() {
			return {
				menuHeight: 0,
				dataList: [],
				selectTime: '',
				options: [],
				isDone: false,
				total: 0,
				pageParams: {
					pageSize: 10,
					pageNum: 1,
				},
				btnType: 1,
				btnType2: 1,
			};
		},
		async onReachBottom() {
			if (this.total <= this.dataList.length) {
				this.isDone = true
			}
			if (this.isDone) return

			this.pageParams.pageNum += 1
			this.getDataList()
		},
		methods: {
			getImgUrl,
			getImgUrlLocal,
			generatePastMonths() {
				const currentDate = new Date();
				const currentYear = currentDate.getFullYear();
				const currentMonth = currentDate.getMonth() + 1; // 月份从 0 开始，所以要加 1

				const months = [];

				for (let month = currentMonth; month >= 1; month--) {
					// 确保月份是两位数格式
					const formattedMonth = month.toString().padStart(2, '0');
					months.push(`${currentYear}-${formattedMonth}`);
				}

				this.options = months.map(item => {
					return {
						value: item,
						label: item
					}
				})

				this.selectTime = this.options[0].value
			},
			getShareParticipateStatus(item) {
				if (item.auditStatus == null) {
					return '进行中'
				} else if (item.isDone) {
					return '已结束'
				} else if (item.shareParticipateInStatus == 1) {
					return '已进场'
				} else if (item.shareParticipateInStatus == 2) {
					return '已离场'
				} else if (item.paymentStatus == 1) {
					return '已付款'
				} else if (item.auditStatus == 0) {
					return '已申请'
				} else if (item.auditStatus == 1) {
					return '已通过'
				} else if (item.auditStatus == 2) {
					return '已拒绝'
				} else if (item.auditStatus == 3) {
					return '已踢出'
				}
			},
			changeTime(e) {
				this.selectTime = e
				this.dataList = []
				this.getDataList()
			},
			formatDateTime(dateString) {
				const date = new Date(dateString);
				return `${date.getFullYear()}-${
			    String(date.getMonth() + 1).padStart(2, '0')}-${
			    String(date.getDate()).padStart(2, '0')} ${
			    String(date.getHours()).padStart(2, '0')}:${
			    String(date.getMinutes()).padStart(2, '0')}:${
			    String(date.getSeconds()).padStart(2, '0')}`;
			},
			async getDataList(type, val) {
				if (type) {
					this.btnType = type
					this.dataList = []
					if (val) {
						this.btnType2 = val
					}
				}
				let res = ''
				if (this.btnType == 2) {
					if (this.btnType2 == 2) {
						this.pageParams.month = this.selectTime
					} else {
						this.pageParams.month = ''
					}
					res = await getMyJoinedOrderShareApi(this.pageParams)
				} else {
					res = await getOrderParticipateShareCounterApi()
				}
				if (res.code == 200) {
					this.dataList.push(...res.rows)
					this.total = res.total
				}
			},
			handleDetails(item) {
				// if (item.auditStatus === 2) return
				this.getnav('/pages/mine/cardCombination/details?id=' + item.id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.topBox {
		display: flex;
		justify-content: space-between;

		.lines {
			display: flex;
			position: relative;
			margin-bottom: 40rpx;

			.line {
				color: #fff;
				font-size: 26rpx;

				&:nth-child(1) {
					margin-right: 20rpx;
				}
			}

			.active {
				position: relative;

				&::after {
					width: 196rpx;
					height: 6rpx;
					background: #0FC6C2;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					content: "";
					position: absolute;
					bottom: -20rpx;
					left: 0;
				}
			}

			&::after {
				content: "";
				position: absolute;
				bottom: -20rpx;
				width: 416rpx;
				height: 6rpx;
				background: #565656;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 0.51;
			}
		}

		.selectTime {
			width: 200rpx;
		}
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.btnOut {
			flex: 1;
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
			margin-right: 50rpx;
			height: 90rpx;

			&:last-child {
				margin-right: 0;
			}

			.btn {
				background-color: #B3B4C3;
			}
		}

		.btnOut2 {
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);

			.btn {
				background: #2cb3af;
			}
		}

		.btn {
			width: 100%;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			border-radius: 64rpx;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
		}
	}

	.items {
		.item {
			padding: 48rpx 40rpx;
			margin-bottom: 16rpx;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				.top {
					display: flex;

					.name {
						font-weight: 500;
						font-size: 36rpx;
						color: #FFFFFF;
					}

					.num {
						width: 100rpx;
						height: 40rpx;
						background: #0FC6C2;
						border-radius: 14rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						margin-bottom: 24rpx;

						text {
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 24rpx;
						}
					}
				}

				.bottom {
					.tip {
						text {
							&:nth-child(1) {
								font-weight: 500;
								font-size: 28rpx;
								color: #86909C;
								margin-right: 20rpx;
							}

							&:nth-child(2) {
								font-weight: 500;
								font-size: 28rpx;
								color: #fff;
							}
						}
					}
				}
			}

			.right {
				.state {
					width: 100rpx;
					height: 40rpx;
					border-radius: 14rpx;
					background: rgba(255, 96, 72, .3);
					border: 2rpx solid #FF6048;
					display: flex;
					align-content: center;
					justify-content: center;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FF6048;
					}
				}

				.state2 {
					width: 100rpx;
					height: 40rpx;
					background: rgba(134, 144, 156, 0.3);
					border-radius: 14rpx;
					border: 2rpx solid #86909C;
					display: flex;
					align-content: center;
					justify-content: center;

					text {
						font-weight: 500;
						font-size: 24rpx;
						color: #86909C;
					}
				}
			}
		}
	
	}

	.content {
		padding: 32rpx;
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}
</style>